<template>
  <div class="left-container">
    <h2>Left</h2>
    <p ref="p">{{ age }}</p>
    <button @click="age++">+1</button>
    <art-list ref="artlistRef"></art-list>
  </div>
</template>

<script>
import ArtList from '@/components/ArtList.vue'
export default {
  components: {
    ArtList
  },
  data () {
    return {
      age: 20
    }
  },
  // // 第1个钩子函数 beforeCreate
  // beforeCreate () {
  //   console.log('beforeCreate', this.age)
  // },
  // // 第2个钩子函数 created
  // created () {
  //   console.log('created', this.age)
  // },
  // // 第3个钩子函数 beforeMount
  // beforeMount () {
  //   console.log('beforeMount', document.querySelector('h2'))
  // },
  // // 第4个钩子函数，mounted
  // mounted () {
  //   console.log('mounted', document.querySelector('h2'))
  // },
  // // 第5个钩子函数，beforeUpdate
  // beforeUpdate () {
  //   console.log('beforeUpdate', this.age, this.$refs.p.innerHTML) // 21  20
  // },
  // // 第6个钩子函数，updated
  // updated () {
  //   console.log('updated', this.age, this.$refs.p.innerHTML)
  // },
  // // 第7个钩子函数，beforeDestroy
  // beforeDestroy () {
  //   console.log('beforeDestroy', this.$refs.p)
  // },
  // // 第8个钩子函数，desdroyed
  // destroyed () {
  //   console.log('destroyed', this.$refs.p)
  // }

  // 错误捕获钩子函数
  errorCaptured (err, vm, info) {
    console.log(err.message) // 拿到 错误描述信息
    console.log(vm) // 报错的那个组件的实例对象
    console.log(info) // 也是错误信息
    return false // 阻止错误继续传播
  }
}
</script>

<style lang="less" scoped>
.left-container {
  background-color: cadetblue;
}
</style>
